<template>
  <div>
    <div class="fcRightBox">

      <div class="fcHeader">
        <div class="fcHeader-container" style="margin-bottom: 20px">
          <div class="fcHeader-title-container">
            <div class="left-part">
              <div class="title">本地店铺报告</div>
              <div class="refresh-data-time"></div>
            </div>
            <div class="right-part">
            <span class="baidu-market-tip">
              下载<a href="https://mobile2.baidu.com/index.html?navfrom=fcreport" target="_blank" rel="noreferrer"><span class="baidu-market-name">百度营销APP</span></a>，手机端随时随地看数据
            </span>
              <div class="fcHeader-date-pick-container">
                <el-date-picker
                    class="custom-date-picker"
                    format="yyyy/MM/dd"
                    v-model="timerArray"
                    style="width: 240px"
                    type="daterange"
                    align="right"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="queryList"
                    :picker-options="pickerOptions"
                >
                  <template slot="prefix">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        min-width="24"
                        height="24"
                        class="custom-icon"
                        focusable="false"
                    >
                      <path
                          fill="currentColor"
                          d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"
                      ></path>
                    </svg>
                  </template>
                </el-date-picker>
                <el-checkbox v-model="checked">比较</el-checkbox>
              </div>
            </div>
          </div>
          <div style="margin-top: 10px">
            <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList">
              <span slot="prefix" class="select-prefix">时间单位:</span>
              <el-option
                  v-for="item in sumWaySelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
            <span style="color: #0054e6; font-size: 14px">更多筛选</span>
          </div>
        </div>

      </div>
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div class="chart" ref="chart" style="height: 200px;width: 300px;margin: auto"></div>
        <div class="">
          <div class="contentHeader">
            <el-input
                placeholder="请搜索落地页url"
                style="width: 200px"
                v-model="form.landingUrl"
                @change="queryList"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="contentHeader_right" style="justify-content: flex-end">
              <el-dropdown @command="handleCommand" trigger="click" style="margin-right: 16px">
                <el-button style="width: 160px;padding: 6px;text-align: left">
                  <span style="display:inline-block;width: 120px;color: rgba(19, 22, 26, 0.9);font-size: 12px"> <i v-if="!selectedDivision">细分</i><i v-else>细分：</i>{{ selectedDivision }}</span> <i class="el-icon-arrow-down el-icon--right" style="color: rgba(19, 22, 26, 0.9)"> </i>
                </el-button>
                <!-- 第一层子菜单 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="hour">小时</el-dropdown-item>
                  <el-dropdown-item command="purchase">购买方式</el-dropdown-item>
                  <el-dropdown-item command="device">推广设备</el-dropdown-item>
                  <el-dropdown-submenu>
                    <template slot="title">地域</template>
                    <!-- 第二层子菜单 -->
                    <el-dropdown-item command="province">分省</el-dropdown-item>
                    <el-dropdown-item command="city">分地市</el-dropdown-item>
                  </el-dropdown-submenu>
                </el-dropdown-menu>
              </el-dropdown>

              <el-dropdown  style="margin-right: 16px">
                <el-button type="primary"
                           style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value11
                    }}</span>

                  <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in options11" :key="item.value">{{ item.label }}</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
              <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择" class="select-with-prefix1">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-button  @click="handleTabClick" class="rightBt" style="padding: 6px 12px;margin-right: 8px;">重置列宽</el-button>

            </div>
          </div>
          <el-table
              :data="tableList"
              style="width: 100%; background: #ebedf5"
              :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="createTime" label="日期" sortable min-width="180"></el-table-column>
            <el-table-column prop="storeName" label="门店名称（分店名称" sortable min-width="160"></el-table-column>
            <el-table-column prop="toShow" label="展现" sortable min-width="130" align="right"></el-table-column>
            <el-table-column prop="click" label="点击" sortable min-width="130"  align="right"></el-table-column>
            <el-table-column prop="consumption" label="消费" sortable min-width="130" align="right"></el-table-column>
            <el-table-column prop="averageClickPrice" label="平均点击价格" sortable min-width="130" align="right"></el-table-column>
            <el-table-column prop="clickRate" label="点击率" sortable min-width="130" align="right"></el-table-column>
          </el-table>
          <div
              style="height: 80px; display: flex; align-items: center; justify-content: flex-end; width: 100%; margin-top: 10px; line-height: 80px"
          >
            <div>
              <el-pagination
                  background
                  style="min-width: 380px; height: 80px; box-sizing: border-box; padding-top: 23px"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="form.pageNum"
                  :page-size="form.pageSize"
                  :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                  layout="sizes, prev, pager, next, jumper"
                  :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block; margin-left: 0px; background: #ebedf5; border-color: #ebedf5; color: rgba(19, 22, 26, 0.9)"
                  type="primary"
                  size="small"
                  @click="queryList"
              >确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import * as echarts from "echarts";
import { localStoreReportList } from "@/services/model/datacenter";

export default {
  mixins: [ItemMixins],
  data() {
    return {
      isToggleStatus: false,
      chart: null,
      value: "下载",
      sumTypeList: [
        {
          value: "消费",
          label: "消费",
        },
        {
          value: "展示",
          label: "展示",
        },
        {
          value: "点击",
          label: "点击",
        },
        {
          value: "平均点击价格",
          label: "平均点击价格",
        },
      ],
      options2: [
        {
          value: "下载",
          label: "下载",
        },
        {
          value: "发送邮箱",
          label: "发送邮箱",
        },
      ],
      options: [
        {
          value: 0,
          label: "合计",
        },
        {
          value: 1,
          label: "分时",
        },
        {
          value: 2,
          label: "分日",
        },
        {
          value: 3,
          label: "分周",
        },
        {
          value: 4,
          label: "分月",
        },
      ],
      isSelect: "账户整体",
      activeName: "整体走势",
      form: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        createTime: "",
        updateTime: "",
        landingUrl: "",
        sumWay: "",
      },
      checked: false,
      sumWaySelectList: [
        { value: 0, label: "合计" },
        { value: 1, label: "分时" },
        { value: 2, label: "分日" },
        { value: 3, label: "分周" },
        { value: 4, label: "分月" },
      ],
    };
  },
  methods: {
    async queryList() {
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let res = await localStoreReportList(this.form);
      const modifiedArray = this.replaceNullWithDash(res.rows);
      this.tableList = modifiedArray || [];
      this.form.total = Math.ceil(Number(res.total));
      if (this.tableList.length === 0) {
        this.initChart(true);
      } else {
        this.initChart(false);
      }
    },
    initChart(isEmptyData) {
      this.chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: isEmptyData ? "暂无数据" : "",
          left: "center",
          top: "middle",
          textStyle: {
            color: "#A9A9A9",
            fontSize: 20,
          },
        },
        series: [
          {
            type: "funnel",
            width: "80%",
            height: "80%",
            top: "10%",
            left: "10%",
            data: isEmptyData
                ? [

                  { value: 100, name: "  " },
                  { value: 66, name: "    " },
                  { value: 33, name: "    " },
                ]
                : [], // 实际数据或者空数据
            label: {
              show: false, // 隐藏实际标签
            },
            itemStyle: {
              opacity: isEmptyData ? 1: 1, // 将颜色透明度设为0
              normal: {
                color: function (params) {
                  // 使用灰度颜色随透明度变化来表示层次
                  var colorList = [
                    "rgba(128, 128, 128, 0.1)",
                    "rgba(128, 128, 128, 0.1)",
                    "rgba(128, 128, 128, 0.1)",
                    "rgba(128, 128, 128, 0.1)",
                    "rgba(128, 128, 128, 0.1)",
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.queryList();
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.queryList();
    },
    replaceNullWithDash(arr) {
      return arr.map((item) => {
        for (let key in item) {
          if (item[key] === null) item[key] = "-";
        }
        return item;
      });
    },
    formatDate(date) {
      const d = new Date(date);
      const day = ("0" + d.getDate()).slice(-2);
      const month = ("0" + (d.getMonth() + 1)).slice(-2);
      const year = d.getFullYear();
      return [year, month, day].join("-");
    },
  },
  mounted() {
    this.queryList(); // 查询数据
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
}

.fcRightBox {
  width: calc(100vw - 240px);
}

.fcHeader-container {
  padding: 24px;
  background: #fff;
  border-radius: 6px;
}

.fcHeader-title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fcHeader-title-container .left-part {
  display: flex;
  align-items: center;
}

.fcHeader-title-container .left-part .title {
  font-size: 20px;
  color: #282c33;
}

.fcHeader-title-container .right-part {
  display: flex;
  align-items: center;
}

.fcHeader-title-container .right-part .fcHeader-date-pick-container {
  display: flex;
  align-items: center;
}

.fcHeader-title-container .right-part .fcHeader-date-pick-container .el-checkbox {
  margin-left: 12px;
}

.fcHeader-container-custom-dash {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67c23a;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
